<template>
  <div>
    <div class="recommend-title">周末去哪儿</div>
    <div class="list-item">
      <ul>
        <li class="item border-bottom" v-for="item of weekendList" :key="item.id">
          <div class="img-wrapper">
            <img class="img" :src="item.imgUrl" alt="">
          </div>
          <div class="content">
            <p class="item-title">{{ item.title }}</p>
            <p class="item-desc">{{ item.desc }}</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomeWeekend',
  props: {
    weekendList: Array
  }
}
</script>

<style lang="stylus" type="text/stylus" scoped>
@import '~styles/mixins.styl'
.recommend-title
  line-height .8rem
  background-color #eee
  text-indent .2rem
  margin-top .2rem
.item
  margin-bottom .1rem
.img-wrapper
  overflow: hidden;
  height: 0;
  padding-bottom: 37.4375%;
.img-wrapper img{
  opacity 1
}
  .img
    opacity 0
    transition: opacity 400ms;
    width: 100%;
.content
  padding .2rem
  .item-title
    padding-right: 1.4rem;
    color: #212121;
    font-size: .28rem;
    line-height: .48rem;
    ellipse()
  .item-desc
    padding-right: 1.4rem;
    color: #616161;
    font-size: .24rem;
    line-height: .42rem;
    ellipse()
</style>
